<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userOrderRecordsService } from '@/apis/order'
import { useUserStore } from '@/stores'
import OrderCardComponent from '@/UserCenterPackage/Orders/components/OrderCardComponent.vue'

const UserStore = useUserStore()

// 当前选中的标签索引
const currentValue = ref(null)

// 顶部Tabs标签列表
const tabList = ref([{ name: '全部订单', index: 'all' }, { name: '待付款' }, { name: '待出行' }, { name: '待点评' }])

// 用户订单列表
const orderRecordsList = ref([])

// 查询订单所需参数
const orderQuery = ref({
	userID: UserStore.UserInfoList.user_id,
	orderStatus: 'all'
})

// 根据当前选中的标签索引更新查询订单参数
const indexUpdateQuery = () => {
	switch (currentValue.value) {
		case 0:
			orderQuery.value.orderStatus = 'all'
			break
		case 1:
			orderQuery.value.orderStatus = 0
			break
		case 2:
			orderQuery.value.orderStatus = 1
			break
		case 3:
			orderQuery.value.orderStatus = 2
			break
		default:
			break
	}
}

// 获取用户订单数据
const getOrderRecords = async () => {
	const res = await userOrderRecordsService(orderQuery.value)
	orderRecordsList.value = res.data
}

// Tabs标签切换时触发函数
const onTabsChange = () => {
	indexUpdateQuery()
	getOrderRecords()
}

onLoad((options) => {
	if (options) {
		currentValue.value = parseInt(options.index, 10)
		indexUpdateQuery()
	} else {
		currentValue.value = 0
	}

	getOrderRecords()
})
</script>

<template>
	<view class="container">
		<up-sticky bgColor="#fff">
			<up-tabs
				:list="tabList"
				lineWidth="50"
				:scrollable="false"
				:activeStyle="{
					color: '#4b9bfd',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				v-model:current="currentValue"
				@change="onTabsChange"
			></up-tabs>
		</up-sticky>

		<OrderCardComponent v-if="orderRecordsList && orderRecordsList.length !== 0" :orderList="orderRecordsList" @updateList="getOrderRecords()"></OrderCardComponent>

		<up-empty v-else mode="order" textSize="20" width="250" height="250" icon="https://leyouhui-1327374532.cos.ap-beijing.myqcloud.com/Static/order.png"></up-empty>
	</view>
</template>

<style lang="scss" scoped></style>
